<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
			list-style: none;
		}
		#datu{
			background: url(http://res.alltuu.com/static/images/acts/rct/recruit-bg2.jpg) no-repeat;
			background-position: 50% 0; 
			height:540px;
			width:100%;
		}
		#tao{
			width: 100%;
			background: #F5F4F4;
		}
		#li{
			width:80%;
			border:1px solid black;
			margin:auto;
		}
		#li img{
			width: 100%;
		}
		#zhe{
			background: rgba(0,0,0,0.3);
			width:100%;
			height:100%;
			position: fixed;
			top: 0;
			left: 0;
		}
		#weixing{
			width:260px;
			height:265px;
			padding-top: 10px;
			margin:120px auto;
			background: white;
		}
		#weixing h2{
			width:100%;
			font-size: 24px;
			text-indent: 2rem;
			border-bottom: 1px solid black;
		}
		#weixing p{
			width:80%;
			margin:auto;
			font-size: 16px;
			text-indent: 2rem;
		}
		#weixing div{
			width: 100%;
			text-align: center;
		}
		#weixing button{
			width:80%;
			background: blue;
			margin:10px auto;
			display: inline-block;
			line-height: 30px;
			color: white;
			border:none;
		}
		#weixing button:hover{
			background: #0099e5;
		}
	</style>
</head>
<body>
	<div id="datu">
	</div>
	<div id="tao">
		<div id="li">
			<img src="http://res.alltuu.com/static/images/acts/rct/recruit-top2.jpg" alt="自行定制">
		</div>
	</div>
	<div id="zhe">
		<div id="weixing">
			<h2>温馨提示</h2>
			<img src="http://res.alltuu.com/static/images/qr-gongzhonghao.jpg" style="width:100px;height:100px;display:block;margin:4px auto;">
			<p>请关注喔图微信公众号，点击 “定制摄影” -&gt; “找摄影师” 发布需求</p>
			<div>
				<a href="/"><button>确定</button></a>
			</div>
			
		</div>
	</div>
</body>
</html>